<template>
  <Modal :style="{'top': '60px','min-height': '100px'}" :closable="false" width="60%" :footer="null" v-model:visible="show" :title="t('message.audioFile')">
    <div style='display: flex'>
      <div style="width: 60%">
        <Input v-model:value="audioSrc" placeholder="e.g. https://xxx.mp3"></Input>
      </div>
      <div style="width: 40%">
        <Button style="margin-left: 10px" type="primary" @click="itserntAudio()">{{t('message.insert')}}</Button>
        <Button style="margin-left: 10px" type="primary" @click="upload()">{{t('message.upload')}}</Button>
        <Button style="margin-left: 10px" @click="close()" >{{t('message.cancel')}}</Button>
         <input value="" ref="audioFile" type="file" accept="audio/*" id="audioFile" style='display: none'
               @change="insertAudioElement">
      </div>
    </div>
    <div  class="list-box">
      <Spin :spinning='spinning'>
      </Spin>
      <Row v-if="!spinning && dataList && dataList.rows">
        <Col style="padding: 10px" :span="6" v-for="(item,index) in dataList.rows" :key="index">
          <Card hoverable style="width: 100%">
            <template #cover>
              <div class="item-box">
              <audio  :src="item.fileUrl.split('1/profile').join('2')" controls="controls">
                您的浏览器不支持 audio 标签。
              </audio>
              </div>
            </template>
            <CardMeta :title="item.fileName">
              <template #description>
                <!-- <Button size="small" style="margin-right: 10px">查看</Button> -->
                <Button size="small" type="primary" @click="selectAudioPath(item.fileUrl)">选择</Button>
              </template>
            </CardMeta>
          </Card>
        </Col>
      </Row>
    </div>

    
  </Modal>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted} from 'vue'
import {message} from 'ant-design-vue'
import request from '@/utils/request'
import { state } from '@/store/state'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'audio-input',
  emits: ['insert', 'close'],
  props:["show"],

  setup(props, {emit}) {

    const audioSrc = ref('https://kankan.fun/assets/vue/music/mp3/daojiangxing.m4a')
    const audioFile = ref()
    let dataList = ref()
    const visible = ref(false)
    const spinning = ref(false)
    const { t } = useI18n()
    const intsertAudio = () => {
      if (!audioSrc.value) return message.error('请先输入正确的音频地址')
      emit('insert', audioSrc.value)
    }
    
    const selectAudio = () => {
      visible.value = true
      spinning.value = true 
      getFileList()
    }

    const getFileList = () => {
      if(!state.token){
        message.warning("Please Login!")
        return;
      }

      const query = {
        fileType: 'audio'
      }
      request({
        url: '/systems/file/list',
        method: 'get',
        params: query
      }).then(res => {
        dataList.value = res
        spinning.value = false 
      }).catch(err => {
        message.error("error")
        spinning.value = false
      })
    }

    const selectAudioPath = (val: string) =>{
      const path = val.split('1/profile').join('2');
      emit('insert', path)
    }
    const insertAudioElement = (e: any) => {
      const file = e.target.files[0]
      const params = new FormData()
      params.append('file',file)
      params.append('type','audio')
      params.append('name',file.name.split('.')[0])
      uploadFile(params)
    }
    const uploadFile = (data: any) =>{
      spinning.value = true 
      request({
        url: '/systems/file/add',
        method: 'post',
        data: data
      }).then(res => {
        message.success("success")
        spinning.value = false 
        getFileList()
      }).catch(err => {
        message.error("error")
        spinning.value = false
      })
    }

    const close = () => emit('close')
    const upload = () => {
      const obj = document.getElementById('audioFile')
      if (obj) {
        obj.click()
      }
    }

    onMounted(() => {
      getFileList()
    })
    
    return {
      audioSrc,
      intsertAudio,
      audioFile,
      visible,
      spinning,
      dataList,
      t,
      close,
      selectAudio,
      getFileList,
      upload,
      selectAudioPath,
      uploadFile,
      insertAudioElement
    }
  },
})
</script>

<style lang="scss">
.list-box {
  height: 500px;
  overflow: auto;
}

.item-box {
  audio {
    width: 100%;
    height: 100px;
  }
}

.audio-input {
  width: 480px;
}
.ant-modal-wrap {
  z-index: 2000;
}

.btns {
  margin-top: 10px;
  text-align: right;
}
</style>
